<template>
    <div>
        <mu-appbar style="width: 100%;" color="primary">
            <mu-button icon slot="left" style="width: auto;">
                <mu-icon value="arrow_back"></mu-icon>
                返回
            </mu-button>
        </mu-appbar>
        <div class="home-box">
            <mu-carousel hide-controls :cycle="false">
                <mu-carousel-item>
                    <img :src="img2" />
                </mu-carousel-item>
                <mu-carousel-item>
                    <img :src="img2" />
                </mu-carousel-item>
                <mu-carousel-item>
                    <img :src="img3" />
                </mu-carousel-item>
            </mu-carousel>
            <mu-button full-width color="primary" class="scan">扫 描</mu-button>
            <mu-flex justify-content="between" align-items="center">
                <mu-button color="#fff" class="bnts" @click="inputNumber">
                    输入充电桩编码
                </mu-button>
                <mu-button color="#fff" class="bnts">订单记录</mu-button>
            </mu-flex>
        </div>
    </div>
</template>
<script>
import img1 from '@/assets/img1.jpg'
import img2 from '@/assets/img2.jpg'
import img3 from '@/assets/img3.jpg'
// @ is an alias to /src

export default {
    name: 'home',
    data() {
        return {
            img1,
            img2,
            img3
        }
    },
    methods: {
        async inputNumber() {
            try {
                const { result, value } = await this.$prompt(
                    '请输入充电桩编号',
                    '提示',
                    {
                        inputType: 'number'
                    }
                )
                console.log(result, +value)
            } catch (err) {
                console.error(err)
            }
        }
    }
}
</script>
<style lang="postcss">
.home-box {
    width: 100%;
    height: 100%;
    box-szing: border-box;
    padding: 40px 30px 0;
}
.scan {
    height: 60px;
    margin-top: 150px;
    font-size: 20px;
}
.bnts {
    width: 40%;
    height: 60px;
    margin-top: 50px;
    color: #000;
}
</style>
